﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
    </style>

</head>

<body>
    <!--查询-->
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入患者名称" name="name" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入日期（格式：YYYY-MM-DD）" name="createTime" id="createTime" class="layui-input">
            </div>
            <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search"> 查询</button>
        </div>
    </form>
    <!-- 表格-->
    <table class="layui-hide" id="role-table"></table>

    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer', 'form', 'laydate'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;

            // 日期选择器初始化
            laydate.render({
                elem: '#createTime',
                type: 'date'
            });

            // 封装 API 调用函数
            function getTitleManagementList(PageIndex, PageSize, name, createTime) {
                return new Promise((resolve, reject) => {
                    var params = {
                        PageIndex: PageIndex || 1,
                        PageSize: PageSize || 15,
                        Name: name,
                        CreateTime: createTime
                    };

                    $.ajax({
                        //url: 'https://localhost:7171/api/OutpatientConsumption/GetOutpatientConsumption',
                        url: `@ViewBag.BaseUrl/T5/OutpatientConsumption/GetOutpatientConsumption`,
                        data: params,
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            resolve(res);
                        },
                        error: function (xhr, status, error) {
                            reject({ status, error, responseText: xhr.responseText });
                        }
                    });
                });
            }

            // 初始化表格
            table.render({
                elem: '#role-table',
                id: 'DoorSpendtable',
                height: 500,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'createTime', title: '操作时间' },
                    { field: 'orderId', title: '订单号' },
                    { field: 'name', title: '患者姓名' },
                    { field: 'patientNo', title: '就诊卡号' },
                    { field: 'moneyType', title: '业务类型' },
                    { field: 'payType', title: '支付方式' },
                    { field:'money', title: '支付金额' },
                    { field: 'paymentStatus', title: '支付状态' },
                    { title: '操作', toolbar: '<button class="layui-btn layui-btn-primary layui-btn-mini">⚙</button>' }
                ]],
                page: true,
                limit: 15,
                limits: [2, 15, 30, 50]
            });

            function loadRoleData(PageIndex, PageSize) {
                layer.load(2);
                var name = $('[name="name"]').val();
                var createTime = $('#createTime').val();
                getTitleManagementList(PageIndex, PageSize, name, createTime)
                   .then(res => {
                        layer.closeAll('loading');
                        if (res.code === 0) {
                            table.reload('DoorSpendtable', {
                                data: res.data,
                                count: res.totalCount,
                                limit: PageSize || 15,
                                curr: PageIndex || 1
                            });
                        } else {
                            layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    })
                   .catch(error => {
                        layer.closeAll('loading');
                        layer.msg('请求失败: ' + error.error, { icon: 2 });
                        console.error('Ajax请求失败:', error);
                    });
            }

            // 页面加载完成后获取数据
            loadRoleData(1, 15);

            // 表单提交事件
            form.on('submit(search)', function () {
                loadRoleData();
                return false;
            });
        });
    </script>
</body>

</html>